<template>
    <div>
        <Row>
            <Col span="24">
                <Card :bordered="false" class="login-main">
                    <div class="login-main-title">
                        <img src="@/assets/images/logo.png" />
                        <p>欢迎登陆</p>
                    </div>
                    <Form ref="LoginForm" :model="LoginForm" :rules="LoginFormRules" label-position="top">
                        <FormItem prop="email" label="邮件">
                            <Input size="large" v-model="LoginForm.email">
                                <Icon type="ios-mail-outline" slot="prefix" />
                            </Input>
                        </FormItem>
                        <FormItem prop="password" label="密码">
                            <Input type="password" size="large" v-model="LoginForm.password">
                                <Icon type="ios-lock-outline" slot="prefix" />
                            </Input>
                        </FormItem>
                    </Form>
                    <vueTencentCaptcha appid="2005258440" @callback="handleSubmit" />
                    <Button :loading="LoginBtn.loading" type="success" @click="submitLogin" long size="large"><Icon type="md-log-in" style="margin-right:5px" />{{LoginBtn.text}}</Button>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
    name: 'login',
    data(){
        return {
            LoginBtn:{
                loading:false,
                text:"登录"
            },
            LoginForm:{
                email:'',
                password:'',
            },
            LoginFormRules:{
                email:[
                    { required: true, message: '邮箱不能为空', trigger: 'blur' },
                    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
                ],
                password:[
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ]
            }
        }
    },
    methods:{
        ...mapActions([
            'handleLogin',
            'getUserInfo'
        ]),
        submitLogin(){
            this.LoginBtn.loading=true
            this.LoginBtn.text="正在登陆"
            this.$refs['LoginForm'].validate((valid) => {
                    if (valid) {
                        this.$root.captcha.show();
                    }else{
                        this.LoginBtn.loading=false
                        this.LoginBtn.text="登陆"
                    }
                })
            
        },
        handleSubmit (res) {
            if(res.ret==0){
                var userName=this.LoginForm.email
                var password=this.LoginForm.password
                this.handleLogin({ userName, password }).then(res => {
                    this.getUserInfo().then(res => {
                        this.$router.push({
                            name: this.$config.homeName
                        })
                    })
                })
            }else{
                this.LoginBtn.loading=false
                this.LoginBtn.text="登陆"
            }
        }
    }
}
</script>

<style>
body{
    background-color: #f8f8f9
}
.login-main{
    width: 400px;
    margin: 50px auto;
    padding: 0 16px;
}
.login-main-title{
    text-align: center;
    border-bottom: 1px solid #e8eaec;
    padding-bottom: 16px;
    margin-bottom: 32px;
}
.login-main-title img {
    display: inline-block;
    width: 100px;
    height: 100px;
    vertical-align: middle;
}
</style>
